<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>

	<!-- 导入3个文件 开始 -->
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- 导入3个文件 结束 -->

	<script src="../js/axios.min.js"></script>

	<style>
		@import url("https:unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

		.el-table .warning-row {
			background: oldlace;
		}

		.el-table .success-row {
			background: #f0f9eb;
		}
	</style>

</head>


<body>
	<div id="app">
		<template>
			<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
				<el-table-column prop="id" label="#" width="180">
				</el-table-column>
				<el-table-column prop="roleName" label="角色名称" width="180">
				</el-table-column>
			</el-table>
		</template>
	</div>
</body>
<script>


	var vue = new Vue({
		el: '#app',
		data: {
			tableData: [],
		},
		methods: {
			tableRowClassName({ row, rowIndex }) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			get: function () {

				//1、封装数据
				var url = getRootPath()+ 'userRole/findAll?pageNumber=1&pageSize=4';

				//2、编写回调函数
				var callback = function (dataR) {

					console.log(dataR);
					var code = dataR.data.code;

					var data = dataR.data.data;

					/* 此处需要改成你的逻辑 */
					var roleList = data.roleList;



					var rs = [];
					for (var index = 0; index < roleList.length; index++) {
						var role = roleList[index];
						var id = role.id;
						var roleName = role.roleName;
						var item = {

						};
						item.id = id;
						item.roleName = roleName;
						rs.push(item);

					}
					console.log(rs);

					//致命
					vue.tableData = rs;

				}

				//3、使用vue发送get请求
				axios.get(url).then(callback);
			},


		}
	})

	vue.get();

</script>

</html>